<!--  -->
<template>
  <div class>
    <div>
      <div class="section">
        <Carousel
          v-model="value1"
          loop
          class="my-swipe"
          :autoplay="setting.autoplay"
          :autoplay-speed="setting.autoplaySpeed"
          :dots="setting.dots"
          :radius-dot="setting.radiusDot"
          :trigger="setting.trigger"
          :arrow="setting.arrow"
        >
          <CarouselItem v-for="(item,index) in dataImg" :key="index">
            <img :src="item.bannerUrl" alt class="my-swipe-img" />
          </CarouselItem>
        </Carousel>

        <div class="content_box_information" v-if="!mobilePc">
          <input
            type="text"
            placeholder="您的公司名称"
            class="content_box_information_input_w"
            v-model="company"
            maxlength="30"
          />
          <input
            type="text"
            placeholder="您的姓名或称呼"
            class="content_box_information_input_name"
            v-model="username"
            maxlength="10"
          />
          <input
            type="text"
            placeholder="输入手机号码"
            class="content_box_information_input_phone"
            v-model="phone"
            maxlength="11"
            oninput="value=value.replace(/[^\d]/g,'')"
          />
          <div class="content_box_information_but" @click="featData">提交</div>
        </div>
      </div>
      <!-- 我们的服务 -->
      <div class="lservice">
        <div class="lservice_title">
          <div class="lservice_title_left">我们的服务</div>
          <div class="lservice_title_right">一站式服务 专业，省心，高效</div>
        </div>
        <div class="lservice_content">
          <div class="lservice_content_list" v-for="(item,index) in queryData" :key="index">
            <img :src="item.imgUrl" alt class="lservice_content_list_img" @click="goProject(item)"/>
            <div class="lservice_content_list_title" @click="goProject(item)">{{item.typeName}}</div>
            <div class="lservice_content_list_listcon">
              <!-- <div
                class="lservice_content_list_listcon_con"
                v-for="(temp,key) in item.child"
                :key="key"
                @click="goProjectInfo(temp)"
                :title="temp.serviceName"
              >{{temp.serviceName}}</div> -->
            </div>
          </div>
        </div>
      </div>

      <!-- 商学院 -->
      <div class="lservice business">
        <div class="lservice_title">
          <div class="lservice_title_left">商学院</div>
          <div class="lservice_title_right" @click="allBusiness">查看更多></div>
        </div>
        <div class="business_content">
          <div
            class="business_content_list"
            v-for="(item,index) in businessSholle"
            :key="index"
            @click="info(item)"
          >
            <div class="lservice_content_list_c">
              <img :src="item.picture" alt class="business_content_list_img" />
              <div class="business_content_list_title">{{item.title}}</div>
              <div class="business_content_list_teah">主讲：{{item.lecturer}}</div>
              <div class="business_content_list_content">{{item.remark}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="taxation">
        <img src="../../assets/img/caishui.jpg" alt class="taxation_img" />
      </div>

      <!-- 新闻资讯 -->
      <div class="lservice business">
        <div class="lservice_title">
          <div class="lservice_title_left">新闻资讯</div>
          <div class="lservice_title_right" @click="goNews">查看更多></div>
        </div>

        <div class="new_title">
          <div
            class="new_title_industry"
            :class="{'new_title_class': industryNews}"
            @click="industryNewsBut(0)"
          >行业新闻</div>
          <div class="new_title_g"></div>
          <div
            class="new_title_industry"
            :class="{'new_title_class': !industryNews}"
            @click="industryNewsBut(1)"
          >企业新闻</div>
        </div>
        <div class="new_title_content">
          <div class="new_title_content_list" v-for="(item,index) in newData" :key="index">
            <div class="new_title_content_list_img_left">
              <img :src="item.picture" alt class="new_title_content_list_img" />
            </div>
            <div class="new_title_content_list_img_right" @click="getInfo(item)">
              <div class="new_title_content_list_img_right_title">{{item.title}}</div>
              <div class="new_title_content_list_img_right_content">{{item.remark}}</div>
              <div class="new_title_content_list_img_right_timeType">
                <div class="new_title_content_list_img_right_timeType_time">{{item.createTime | formatDate}}</div>
                <div>行业：{{item.type}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      
      <div class="lservice business">
        <div class="lservice_title">
          <div class="lservice_title_left">合作伙伴</div>
          <!-- <div class="lservice_title_right">查看更多></div> -->
        </div>
        <div class="business_content cooperationList">
          <div class v-for="(item,index) in imgData" :key="index">
            <img :src="item.imgUrl" alt class="cooperation" />
          </div>
        </div>
      </div>

      <!-- 友情链接 -->
      <div class="separated"></div>
          <div class="lservice business">
        <div class="lservice_title">
          <div class="lservice_title_left">友情链接</div>
          <!-- <div class="lservice_title_right">查看更多></div> -->
        </div>
        <div class="business_content cooperationList">
          <div class v-for="(item,index) in aimgData" :key="index">
            <a :href="item.href" target="black">
              <img :src="item.img" alt class="cooperation" />
            </a>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Head from "../../components/Head";
import Foot from "../../components/Foot";
import lefINvitation from "../../components/lefINvitation";
import nightNvitation from "../../components/nightNvitation";
import data from "../../api/api"; //  问题详情模拟数据
import {
  findRecomend,
  getTypeAndProblem,
  bannerList,
  serviceType,
  findByPageList,
  partnersFindByPageList,
  newFindByPageList,
  contactWayCreat
} from "../../api/info";
import { clieentWidth } from "../../utils/clientwidth";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Head,
    Foot,
    lefINvitation,
    nightNvitation
  },
  data() {
    //这里存放数据
    return {
      industryNews: true, // 行业新闻  企业新闻
      aimgData:[
        {
          img:require('../../assets/img/gjswzjfjsswj.png'),
          href:'http://fujian.chinatax.gov.cn/'
        },
         {
          img:require('../../assets/img/fjskxjst.jpg'),
          href:' http://kjt.fujian.gov.cn/'
        },
         {
          img:require('../../assets/img/fjsgsxzglj.jpg'),
          href:'http://gsj.fujian.gov.cn/index2.htm'
        },
         {
          img:require('../../assets/img/fjsrlzyhshbzt.png'),
          href:' http://rst.fujian.gov.cn/m/#!/'
        },
      ],
      mobilePc: false,
      company: "",
      username: "",
      phone: "",
      getTypeAndProblemData: [],
      value1: 0,
      setting: {
        autoplay: true,
        autoplaySpeed: 2000,
        dots: "inside",
        radiusDot: false,
        trigger: "click",
        arrow: "hover"
      },
      findRecomendsData: [], // 推荐服务详情
      // 轮播数据
      dataImg: [],

      swiperOption: {
        slidesPerView: clieentWidth() ? 3 : 5, //当前页面显示的个数
        // centeredSlides: true, // 是否第一个居中显示
        // spaceBetween: 30,    //  边距
        grabCursor: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      },

      queryData: [],
      businessSholle: [],
      newData: [],
      imgData: []
    };
  },
  //监听属性 类似于data概念
  computed: {
    data: function() {
      return data;
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 服务推荐项目
    findRecomends() {
      findRecomend().then(res => {
        this.findRecomendsData = res.data;
      });
    },
    // 项目列表
    goProjectlist(item) {
      this.$router.push({ path: "/project", query: { type: item.id } });
      // console.log(item);
    },
    // 常见问题
    getTypeAndProblemList() {
      getTypeAndProblem().then(res => {
        this.getTypeAndProblemData = res.data;
      });
    },
    // banner get
    getbannerList(appType) {
      bannerList(appType).then(res => {
        this.dataImg = res.data;
      });
    },
    peobleAll(item) {
      this.$router.push({ path: "/problemlist", query: { id: item.id } });
    },
    changego(item) {
      this.$router.push({ path: "/problem", query: { id: item.id } });
    },
    // 查询是否注册
    featData() {
      if (this.company != "" && this.username != "" && this.phone != "") {
        let data = {
          companyName: this.company,
          username: this.username,
          phoneNumber: this.phone
        };
        contactWayCreat(data).then(res => {
          if (res.code == "0000") {
            this.$Message.info("提交成功。");
          } else {
            this.$Message.info("提交失败。");
          }
          this.company = "";
          this.username = "";
          this.phone = "";
        });
      }
    },
    // 回到顶部
    buttop(val) {
      if (val) {
        document.documentElement.scrollTop = 0;
      }
    },
    // pc is false
    ismobilePc() {
      if (clieentWidth()) {
        this.mobilePc = true;
      } else {
        this.mobilePc = false;
      }
    },
    /////////////////////////////////////////////////////////////////////////////////
    serviceTypeData() {
      serviceType().then(res => {
        this.queryData = res.data;
      });
    },

    // 商学院
    getfindByPageList() {
      let data = {
        pageSize: 3,
        currentPage: 1
      };
      findByPageList(data).then(res => {
        this.businessSholle = res.data.list;
      });
    },
    // 项目详情
    goProject(item) {
      this.$router.push({ path: "/project", query: { type: item.id } });
    },
    // 合作伙伴

    getpartnersFindByPageList() {
      let data = {
        pageSize: 10,
        currentPage: 1
      };
      partnersFindByPageList().then(res => {
        this.imgData = res.data.list;
      });
    },
    // 商学院
    allBusiness() {
      this.$router.push({ path: "/business" });
    },
    // 新闻资讯
    goNews() {
      this.$router.push({ path: "/news" });
    },
    // 新闻选择
    industryNewsBut(type) {
      if (type == 0) {
        this.industryNews = true;
        this.getNewFindByPageList("行业新闻");
      } else {
        this.industryNews = false;
        this.getNewFindByPageList("企业新闻");
      }
    },
    // 新闻资讯
    getNewFindByPageList(type) {
      let data = {
        pageSize: 3,
        currentPage: 1,
        params: {
          type: type
        }
      };
      newFindByPageList(data).then(res => {
        this.newData = res.data.list;
      });
    },
    goProjectInfo(item) {
      this.$router.push({
        path: "/contentInfo",
        query: { id: item.id, parentId: item.parentId }
      });
    },
    //  新闻详情
    getInfo(item) {
      this.$router.push({ path: "/newsInfo", query: { id: item.id } });
    },
    // 商学院详情
    info(item) {
      this.$router.push({ path: "/businessInfo", query: { id: item.id } });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // this.findRecomends();
    // this.getTypeAndProblemList();
    this.getbannerList(0);
    this.ismobilePc();
    //
    this.serviceTypeData();
    this.getfindByPageList();
    this.getpartnersFindByPageList();
    this.getNewFindByPageList("行业新闻");
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>


<style lang='scss'>
.section {
  position: relative;
  height: 4.6rem;
  background: #f2f2f2;
}
.my-swipe {
  height: 4.23rem;
  color: #fff;
  font-size: 0.3rem;
  text-align: center;
}
.my-swipe-img {
  width: 100%;
  height: 4.6rem;
}

.content_box_information {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.2rem 0 0.4rem;
  position: relative;
  top: -0.8rem;
}

.content_box_information_input_w,
.content_box_information_input_name,
.content_box_information_input_phone {
  margin: 0 0.05rem;
  padding: 0.12rem 0.05rem;
  height: 0.2rem;
  width: 3rem;
  border: 1px solid #f0f0f0;
  height: 0.4rem;
  font-size: 0.13rem;
}
.content_box_information_input_w::-webkit-input-placeholder,
.content_box_information_input_name::-webkit-input-placeholder,
.content_box_information_input_phone::-webkit-input-placeholder {
  font-size: 0.13rem;
}
.content_box_information_but {
  // width: 1rem;
  padding: 0.11rem 0.3rem;
  color: white;
  background-color: rgba(7, 103, 242, 1);
  cursor: pointer;
  font-size: 0.13rem;
}

.swiper-container {
  // --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
  --swiper-navigation-color: #00ff33; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px; /* 设置按钮大小 */
}

.lservice {
  background: #f2f2f2;
}
.lservice_title {
  width: 77%;
  margin: auto;
  padding: 0.4rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lservice_title_left {
  font-size: 0.3rem;
  font-family: 微软雅黑;
  font-weight: 400;
  font-style: normal;
}
.lservice_title_right {
  font-family: 微软雅黑;
  font-weight: 400;
  font-style: normal;
  font-size: 0.16rem;
  cursor: pointer;
}

.lservice_content {
  width: 77%;
  margin: auto;
  padding: 0.4rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.lservice_content_list {
  width: 30%;
  height: 3rem;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 12px;
  text-align: center;
  margin: 0.3rem 1%;
  box-shadow: 5px 5px 13px rgba(215, 215, 215, 0.349019607843137);
}
.lservice_content_list_img {
  width: 1.69rem;
  height: 1.59rem;
  margin: 0.2rem 0;
}
.lservice_content_list_img:hover{
  transform: scale(1.1);
  cursor: pointer;
  transition: all 0.5s;
}
.lservice_content_list_title {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑;
  font-weight: 700;
  font-style: normal;
  font-size: 0.2rem;
  cursor: pointer;
}
.lservice_content_list_listcon {
  width: 80%;
  margin: 0.25rem auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.lservice_content_list_listcon_con {
  width: 30%;
  margin: 0.1rem 0.05rem;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑;
  font-style: normal;
  font-size: 0.14rem;
  padding: 0.05rem 0.1rem;
  border: 1px solid rgba(0, 0, 0, 0.058);
  box-shadow: 2px 2px 5px rgba(215, 215, 215, 0.349019607843137);
  border-radius: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.lservice_content_list_listcon_con:hover{
  color: white;
  background-color: rgba(7, 103, 242, 1);
}
.business {
  background: rgba(255, 255, 255, 0.87);
}
.lservice_content_list_c {
  width: 90%;
  margin: auto;
}
.business_content_list_img {
  width: 100%;
  height: 2.8rem;
  margin: 0.1rem 0;
}
.business_content {
  width: 77%;
  margin: auto;
  padding: 0.4rem 0;
  display: flex;
  // justify-content: center;
  flex-wrap: wrap;
}
.business_content_list {
  width: 30%;
  background-color: rgba(255, 255, 255, 1);
  border: none;
  border-radius: 12px;
  margin: 0.3rem 1.5%;
  box-shadow: 5px 5px 13px rgba(215, 215, 215, 0.349019607843137);
  cursor: pointer;
}
.business_content_list_title {
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑;
  font-weight: 700;
  font-style: normal;
  font-size: 0.16rem;
  margin: 0.05rem 0;
}
.business_content_list_img:hover {
  transform: scale(1.03);
  transition: all 0.5s;
}
.business_content_list_teah {
  font-family: 微软雅黑;
  font-weight: 400;
  font-style: normal;
  font-size: 0.14rem;
  margin: 0.05rem 0;
}
.business_content_list_content {
  font-family: 微软雅黑;
  font-weight: 400;
  font-style: normal;
  font-size: 0.14;
  color: rgb(174, 174, 174);
  margin: 0.05rem 0;
  font-size: 0.12rem;
}
.taxation {
  width: 100%;
  padding: 0.2rem 0;
  text-align: center;
  background: rgba(255, 255, 255, 0.87);
}
.taxation_img {
  width: 100%;
}
.new_title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.new_title_industry {
  font-family: 微软雅黑;
  font-weight: 400;
  font-style: normal;
  font-size: 0.16rem;
  padding: 0.1rem 0.3rem;
  border-radius: 0.5rem;

  color: #000;
  cursor: pointer;
}
.new_title_class {
  color: white;
  background: rgba(7, 103, 242, 1);
}
.new_title_g {
  margin: 0 0.5rem;
  width: 0.02rem;
  height: 0.28rem;
  background: rgba(0, 0, 0, 0.459);
}
.new_title_content {
  width: 70%;
  margin: 1rem auto;
}
.new_title_content_list {
  display: flex;
  // justify-content: center;
  margin: 0.3rem 0;
}

.new_title_content_list_img {
  width: 3rem;
  height: 2rem;
}
.new_title_content_list_img_right {
  padding-left: 0.5rem;
  cursor: pointer;
}
.new_title_content_list_img_right_title,
.new_title_content_list_img_right_content {
  font-family: 微软雅黑;
  font-weight: 400;
  font-style: normal;
  font-size: 0.24rem;
  // height: 0.7rem;
  padding-bottom: 0.1rem;
}
.new_title_content_list_img_right_content {
  color: rgb(174, 174, 174);
  font-size: 0.14rem;
  // height: 1rem;
}
.new_title_content_list_img_right_timeType {
  display: flex;
  color: rgb(174, 174, 174);
  font-size: 0.14rem;
}
.new_title_content_list_img_right_timeType_time {
  width: 50%;
}
.separated {
  width: 100%;
  height: 0.2rem;
  background: #f2f2f2;
}
.cooperationList{
  width: 60%;
  margin: auto;
  justify-content: space-between;
}
.cooperation {
  width: 2.2rem;
  height: 1rem;
  margin: 0.3rem 0.3rem;
}
@media screen and (max-width: 1400px) {
  .lservice_content_list {
    height: 3.5rem;
  }
}
@media screen and (max-width: 780px) {
  .my-swipe-img,
  .section,
  .my-swipe {
    height: 1.5rem;
  }
  .lservice_title {
    width: 90%;
    padding: 0.1rem 0;
  }
  .lservice_content_list {
    width: 100%;
    //  height: 3rem;
    margin: 0.1rem 0;
  }
  .lservice_title_left {
    font-size: 0.16rem;
  }
  .lservice_content_list_listcon_con {
    width: 40%;
  }
  .lservice_title_right {
    font-size: 0.14rem;
  }
  .business_content {
    width: 90%;
  }
  .business_content_list {
    width: 100%;
  }
  .new_title_g {
    margin: 0 0.2rem;
  }
  .new_title_content_list {
    display: block;
    width: 90%;
    margin: 0.2rem auto;
    box-shadow: 5px 5px 13px rgba(215, 215, 215, 0.349019607843137);
    border-radius: 10px;
  }
  .new_title_content {
    width: 90%;
    margin: 0.2rem auto;
  }
  .new_title_content_list_img_right_content {
    width: 95%;
    margin: auto;
  }
  .new_title_content_list_img_right {
    padding: 0;
  }
  .taxation_img {
    width: 100%;
  }
  .cooperationList{
    width: 90%;
  }
  .cooperationList>div{
    margin: auto;
  }
  // .cooperation{
  //   width: 1.8rem;
  //   height: 0.9rem;
  // }
      .business_content_list_img {

      height: 2rem;
 
    }
}
</style>